<form
  role="form"
  ng-submit="opts.save()"
>
  <h2 class="kuiLocalDropdownTitle">
    Save {{opts.displayName}}
  </h2>

  <div class="kuiLocalDropdownSection">
    <div class="kuiLocalDropdownHeader">
      <label
        class="kuiLocalDropdownHeader__label"
        for="saveDashboardTitle"
      >
        Title
      </label>
    </div>

    <input
      id="saveDashboardTitle"
      class="kuiLocalDropdownInput"
      data-test-subj="dashboardTitle"
      type="text"
      ng-model="model.title"
      placeholder="Dashboard title"
      input-focus="select"
    >
  </div>

  <div class="kuiLocalDropdownSection">
    <div class="kuiLocalDropdownHeader">
      <label
        class="kuiLocalDropdownHeader__label"
        for="saveDashboardDescription"
      >
        Description
      </label>
    </div>

    <input
      id="saveDashboardDescription"
      class="kuiLocalDropdownInput"
      data-test-subj="dashboardDescription"
      type="text"
      ng-model="model.description"
      placeholder="Dashboard description"
    >
  </div>

  <saved-object-save-as-check-box
    class="kuiVerticalRhythmSmall"
    saved-object="opts.dashboard"
  ></saved-object-save-as-check-box>

  <div class="kuiVerticalRhythm">
    <label class="kuiCheckBoxLabel kuiVerticalRhythmSmall">
      <input
        class="kuiCheckBox"
        type="checkbox"
        ng-model="model.timeRestore"
        ng-checked="model.timeRestore"
        data-test-subj="storeTimeWithDashboard"
      >

      <span class="kuiCheckBoxLabel__text">
        Store time with {{opts.displayName}}
      </span>
    </label>

    <div class="kuiLocalDropdownFormNote kuiVerticalRhythmSmall">
      This changes the time filter to the currently selected time each time this dashboard is loaded.
    </div>
  </div>

  <button
    data-test-subj="confirmSaveDashboardButton"
    type="submit"
    ng-disabled="!model.title"
    class="kuiButton kuiButton--primary kuiVerticalRhythm"
    aria-label="Save dashboard"
  >
    Save
  </button>
</form>
